<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="box">
        <input id="text" onkeypress="addList()" type="text" placeholder="请输入清单">
        <ul id="ul" onclick="deleteLi()">
            <!-- <li><span>床前明月光</span><button>X</button></li>
            <li><span>疑是地上霜</span><button>X</button></li>
            <li><span>举头望明月</span><button>X</button></li>
            <li><span>低头思故乡</span><button>X</button></li> -->
        </ul>
    </div>
</body>
<script>
    var count=1;
    function addList(){
        var keyname=event.key;
        var str='';
        var text=document.querySelector('#text')
        var ul=document.querySelector('#ul')
        var li=document.createElement('li')
        if(keyname=='Enter'){
            str+=`
            <span>${count++}.${text.value}</span><button>X</button>
            `
            li.innerHTML=str
            ul.appendChild(li)
            text.value=''
        }
    }
    function deleteLi(){
        // console.log(event.target.parentNode.nodeName)
        if(event.target.parentNode.nodeName==='LI'){
            event.target.parentNode.remove();
        }
    }
</script>
</html>